<script setup>
// 引入 api
import { onMounted, ref } from "vue"

// 导航栏的类名
const navClass = ref("")

// 添加事件监听器
onMounted(() => {
    // 定义窗口宽度的响应式变量
    window.addEventListener('resize', () => {
        window.innerWidth < 600 ? navClass.value = 'nav-mobile' : navClass.value = 'nav-desktop';
    });
});

</script>

<template>
    <!-- 导航栏 -->
    <div :class="[navClass]">
        导航栏
    </div>
</template>

<style scoped>
.nav-mobile {
    background-color: #fff;
    color: #000;
}

.nav-desktop {
    background-color: #333;
    color: #fff;
}
</style>